<template>
    <div class="suggestion">
      <!--标题头-->
      <div class="title">
        <span>建议建言</span>
      </div>
      <!--输入内容区域-->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="建议建言" prop="suggestion">
          <el-input type="textarea" placeholder="尊敬的用户，请您为我们提出宝贵的意见···" v-model="ruleForm.suggestion" rows="4">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交意见</el-button>
          <el-button @click="resetForm('ruleForm')">重新输入</el-button>
        </el-form-item>
      </el-form>
      <div class="content-list">
        <!--建议列表-->
        <comment-component v-if="isReflesh"></comment-component>
      </div>
    </div>
</template>

<script>
import {sendSuggestion} from '../../../api/post/suggestion'
import { getUserId } from '@/libs/util'
import CommentComponent from '../../../components/comment/CommentComponent'
import bus from '../../../assets/js/eventBus'
import {getCurrentStringTime} from '../../../utils/dateUtils'
export default {
  name: 'Suggest',
  components: {CommentComponent},
  // 父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isReflesh: true, // 控制视图是否显示的变量
      ruleForm: {
        suggestion: '',
        userId: getUserId(),
        createTime: getCurrentStringTime(new Date())
      },
      rules: {
        suggestion: [
          { required: true, message: '请填写您宝贵的建议···', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /**
     * 发表意见
     * @param formName
     */
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const promise = sendSuggestion(this.ruleForm)
          promise.then(res => {
            if (res.status === 200) {
              this.$alert(res.message, '成功', {
                confirmButtonText: '确定',
                callback: action => {
                  this.resetForm(formName)
                  bus.$emit('refleshList', true)
                }
              })
            }
          }).catch(error => {
            console.log(error)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /**
     * 重置内容
     * @param formName
     */
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    reload: function () {
      this.isReflesh = false // 先关闭，
      this.$nextTick(() => { this.isReflesh = true }) // 再打开
    }
  }
}
</script>

<style lang="stylus" scoped>
  .suggestion
    .title
      margin: 20px 0  30px
      padding-left:20px
      border-left:2px solid #bbcc44
      font-size 18px
      color: #333333
  .suggestion  >>> .el-form-item__label
     display none
  .suggestion  >>> .el-form-item__content
     margin-left:0px !important
     display flex
     justify-content flex-end
    .content-list
     /*background-color #FAFAFA*/
     min-height 400px
     border-left:1px solid #eee
     border-right:1px solid #eee
     border-top:1px solid #eee
</style>
